<template>
	<div id="detailed">
		<back></back>
		<div id="app">
			<input type="text" placeholder="请输入..." 
				@focus="inputFocus" v-model="searchVal">
			<ul v-if="ulStart==true" id="box" class="panel">
				<li v-for="(item,index) in NewItems" :key="index">{{item.name}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import back from "../../components/back.vue";
	export default {
		name: 'detailed',
		components: {
			back,
		},
		data() {
			return {
				ulStart: false,
				searchVal: "",
				items: [{
						name: "上海",
						value: "sh"
					},
					{
						name: "北京",
						value: "bj"
					},
					{
						name: "重庆",
						value: "cq"
					},
					{
						name: "嗨嗨嗨",
						value: "hhh"
					},
					{
						name: "海上",
						value: "hs"
					},
					{
						name: "京都",
						value: "jd"
					}
				]
			};
		},
		mounted() {
			
		},
		computed: {
			NewItems() {
				var _this = this;
				var NewItems = [];
				this.items.map(function(item) {
					if(item.name.search(_this.searchVal) != -1) {
						NewItems.push(item);
					}
				});
				return NewItems;
			},
		},
		methods: {
			inputFocus: function() {
				this.ulStart = true;
			},

		},
		created(){ 
			
		}
	}
</script>
<style lang="scss">
	@import url("../../assets/css/index.css");
	ul {
		display: inline-block;
		border: 1px solid #ccc;
	}
	ul li {
		width: 100%;
		height: 0.6rem;
		font-size: 0.3rem;
	}
</style>